import React, { useState, useEffect, useContext } from "react";
import { View, StyleSheet, Dimensions, Text } from "react-native";
import Modal from "react-native-modal";
import "@ethersproject/shims";
import { ethers } from "ethers";
import { Icon } from "@rneui/themed";
import CommonContext from '@/utils/createContext'
import Loading from "@/components/LoadingModal";
import { getTransactionDetail } from "@/utils/transfer";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const TransferDetail = () => {

    const { modalVisible, setModalVisible, selectedTransfer, coinType } = useContext(CommonContext)
    const [loadingVisible, setLoadingVisible] = useState(false)
    const [transferDetail, setTransferDetail] = useState({});

    useEffect(() => {
        setLoadingVisible(true)
        getPageData().then(() => setLoadingVisible(false))
    }, [selectedTransfer]);

    const getPageData = async () => {
        if (selectedTransfer && selectedTransfer.hash) {
            let result = await getTransactionDetail(selectedTransfer.hash)
            let totalAmount
            let transcationFee = (parseInt(result.gasUsed?.toHexString()) * parseInt(result.gasPrice?.toHexString()))
                / Math.pow(10, 18)
            switch (coinType) {
                case 'ETH':
                    let value = ethers.utils.formatEther(selectedTransfer.value)
                    totalAmount = (parseFloat(value) + transcationFee).toString() + ' ETH'
                    break;
                case 'USDT':
                    totalAmount = (parseFloat(selectedTransfer.value) + transcationFee).toString() + ' ' + selectedTransfer.symbol
                    break;
                default:
                    break;
            }
            result.totalAmount = totalAmount
            setTransferDetail(result)
        }
    }

    const handlePressCancel = () => {
        setModalVisible(false)
    }

    return (
        <Modal
            isVisible={modalVisible}
            backdropColor='#000000'
            backdropOpacity={0.34}
            style={styles.container}
        >
            <View style={styles.bodyContent}>
                <View style={styles.headerContent}>
                    <Text style={styles.title2}>{selectedTransfer.type}</Text>
                    <Icon type="ionicon" name="close" color="#262626" size={25} style={{ marginRight: 23 * ratio }} onPress={handlePressCancel} />
                </View>
                <View style={styles.transferContent}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 8 * ratio }}>
                        <View style={{ ...styles.circle, backgroundColor: '#5B6DFD', marginLeft: 36 * ratio }}></View>
                        <Text ellipsizeMode='middle' numberOfLines={1}
                            style={{ ...styles.title3, width: 83 * ratio, marginLeft: 8 * ratio }}>
                            Form: {selectedTransfer.from_address}
                        </Text>
                        <Icon type="antdesign" name="right" color="#707070" size={20} style={{ marginLeft: 21 * ratio }} />
                        <View style={{ ...styles.circle, backgroundColor: '#FB182F', marginLeft: 20 * ratio }}></View>
                        <Text ellipsizeMode='middle' numberOfLines={1}
                            style={{ ...styles.title3, width: 83 * ratio, marginLeft: 8 * ratio }}>
                            To: {selectedTransfer.to_address}
                        </Text>
                    </View>
                    {/* 交易行 */}
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 15 * ratio }}>
                        <View><Text style={styles.title1}>Transaction</Text></View>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text ellipsizeMode='middle' numberOfLines={1}
                                style={{ ...styles.title3, color: '#898989', width: 80 * ratio }}>
                                {selectedTransfer.hash}
                            </Text>
                            <Icon type="antdesign" name="copy1" color="#898989" size={25} style={{ marginRight: 27 * ratio }} onPress={handlePressCancel} />
                        </View>
                    </View>
                    <View style={{ alignItems: 'center' }}>
                        <View style={{ ...styles.divider, marginTop: 8 * ratio }}></View>
                    </View>
                    {/* Nonce行 */}
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 * ratio }}>
                        <View><Text style={{ ...styles.title3, marginLeft: 29 * ratio }}>Nonce</Text></View>
                        <View>
                            <Text style={{ ...styles.title3, color: '#898989', marginRight: 27 * ratio }}>
                                {transferDetail.nonce}
                            </Text>
                        </View>
                    </View>
                    <View style={{ alignItems: 'center' }}>
                        <View style={styles.divider}></View>
                    </View>
                    {/* value行 */}
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 * ratio }}>
                        <View><Text style={{ ...styles.title3, marginLeft: 29 * ratio }}>Amount</Text></View>
                        <View>
                            <Text style={{ ...styles.title3, color: '#898989', marginRight: 27 * ratio }}>
                                {selectedTransfer.valueLabel}
                            </Text>
                        </View>
                    </View>
                    <View style={{ alignItems: 'center' }}>
                        <View style={styles.divider}></View>
                    </View>
                    {/* gallimit行 */}
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 * ratio }}>
                        <View><Text style={{ ...styles.title3, marginLeft: 29 * ratio }}>Gas Limit(GWEI)</Text></View>
                        <View>
                            <Text style={{ ...styles.title3, color: '#898989', marginRight: 27 * ratio }}>
                                {transferDetail && parseInt(transferDetail.gasLimit?.toHexString())}
                            </Text>
                        </View>
                    </View>
                    <View style={{ alignItems: 'center' }}>
                        <View style={styles.divider}></View>
                    </View>
                    {/* gasprice行 */}
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 * ratio }}>
                        <View><Text style={{ ...styles.title3, marginLeft: 29 * ratio }}>Gas price</Text></View>
                        <View>
                            <Text style={{ ...styles.title3, color: '#898989', marginRight: 27 * ratio }}>
                                {transferDetail && parseInt(transferDetail.gasPrice?.toHexString())}
                            </Text>
                        </View>
                    </View>
                    <View style={{ alignItems: 'center' }}>
                        <View style={styles.divider}></View>
                    </View>
                    {/* Total行 */}
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 * ratio }}>
                        <View><Text style={{ ...styles.title3, marginLeft: 29 * ratio }}>Total</Text></View>
                        <View>
                            <Text style={{ ...styles.title3, color: '#898989', marginRight: 27 * ratio }}>
                                {transferDetail.totalAmount}
                            </Text>
                        </View>
                    </View>
                </View>
            </View>
            {loadingVisible && <Loading visible={loadingVisible} />}
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    bodyContent: {
        width: width,
        height: 557 * ratio,
        backgroundColor: '#FFFFFF',
        borderTopLeftRadius: 12,
        borderTopRightRadius: 12,
        marginBottom: -20 * ratio
    },
    headerContent: {
        height: 62 * ratio,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    transferContent: {
        width: width,
        height: 494 * ratio,
        backgroundColor: '#FAFBFC'
    },
    circle: {
        width: 29 * ratio,
        height: 29 * ratio,
        borderRadius: 50
    },
    divider: {
        width: 305 * ratio,
        height: 0,
        borderColor: '#DEDEDE',
        borderWidth: 1,
        marginTop: 13 * ratio
    },
    title1: {
        fontSize: 17,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#9D9D9D',
        lineHeight: 23,
        marginLeft: 28 * ratio
    },
    title2: {
        fontSize: 15,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#2A2A2A',
        lineHeight: 20,
        marginLeft: 36 * ratio
    },
    title3: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#9D9D9D',
        lineHeight: 15
    }
})
export default TransferDetail